<template>
    <div class="pages">
        <div class="title">
            <div class="line"></div>
            <div class="text">个人信息</div>
        </div>
        <div class="container">
            <van-image class="avatar" fit="contain"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fecyacg.net%2Fwp-content%2Fuploads%2F2019%2F07%2F63-1Z5231542545E.jpg&refer=http%3A%2F%2Fecyacg.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668735489&t=1848989a6aee209fd5dcd10efc92f540" />
            <span class="attribute">姓名</span><span class="joiner">：</span>
            <span class="content">{{ userInfo.userNickName }}</span>
            <br>
            <span class="attribute">性别</span>
            <span class="joiner">：</span>
            <span class="content">{{ userInfo.sex }}</span>
            <br>
            <span class="attribute">邮箱</span>
            <span class="joiner">：</span>
            <span class="content">{{ userInfo.email }}</span>
            <br>
            <span class="attribute">用户账号</span>
            <span class="joiner">：</span>
            <span class="content">{{ userInfo.userName }}</span>
            <br>
            <span class="attribute">角色</span>
            <span class="joiner">：</span>
            <span class="content">{{ userInfo.role}} </span>
            <br>
            <span class="attribute">部门</span>
            <span class="joiner">：</span>
            <span class="content">{{userInfo.orgName}}</span>
            <br>
            <span class="attribute">职级</span>
            <span class="joiner">：</span>
            <span class="content">{{ userInfo.userStatus}}</span>
            <br>
            <span class="attribute">审批级别</span>
            <span class="joiner">：</span>
            <span class="content">{{userInfo.approvalLevel}}</span>
            <br>
            <span class="attribute">是否为接收人</span>
            <span class="joiner">：</span>
            <span class="content">{{ userInfo.isRecipient ? '是' : '否'}}</span>


        </div>
        <div class="title">
            <div class="line"></div>
            <div class="text">企业信息</div>
        </div>
        <div class="container">
            <van-image class="avatar" fit="contain"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fecyacg.net%2Fwp-content%2Fuploads%2F2019%2F07%2F63-1Z5231542545E.jpg&refer=http%3A%2F%2Fecyacg.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668735489&t=1848989a6aee209fd5dcd10efc92f540" />
            <span class="attribute">企业名称</span>
            <span class="joiner">：</span>
            <span class="content">{{ enterpriseInfo.fullName }}</span>
            <br>
            <span class="attribute">企业简称</span>
            <span class="joiner">：</span>
            <span class="content">{{ enterpriseInfo.shortName }}</span>
            <br>
            <span class="attribute">社会信用代码</span>
            <span class="joiner">：</span>
            <span class="content">{{ enterpriseInfo.socialCreditCode }}</span>
            <br>
            <span class="attribute">法定代表人</span>
            <span class="joiner">：</span>
            <span class="content">{{ enterpriseInfo.legalRepresentative }}</span>
            <br>
            <span class="attribute">注册地址</span>
            <span class="joiner">：</span>
            <span class="content">{{ enterpriseInfo.address }}</span>
            <br>
            <span class="attribute">行政区域划分</span>
            <span class="joiner">：</span>
            <span class="content">{{ enterpriseInfo.regions }}</span>
            <br>
            <span class="attribute">直属机构</span>
            <span class="joiner">：</span>
            <span class="content">{{ enterpriseInfo.belongOrg }}</span>
            <br>
            <span class="attribute">企业简介</span>
            <span class="joiner">：</span>
            <span class="content">{{ enterpriseInfo.companyProfile }}</span>
        </div>
    </div>

</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { getUserInfo } from '@/api/userInfo';

//个人信息
const userInfo = ref({} as any)

//企业信息
const enterpriseInfo = ref({} as any)

onMounted(() => {
    initUserInfo()
})

//初始化用户信息
const initUserInfo = async () => {
    const data = await getUserInfo()
    userInfo.value = data.data.user
    userInfo.value.sex = userInfo.value.gender === 0 ? '男' : '女'
    userInfo.value.role = userInfo.value.roleName[0]
    enterpriseInfo.value = data.data.dept.localInfo
    console.log('用户信息')
    console.log(userInfo.value)
}

</script>
<style lang="scss" scoped>
.pages {
    padding: 16px 12px;

    .title {
        display: flex;
        align-items: center;

        .line {
            width: 4px;
            height: 16px;
            margin-right: 8px;
            background-color: $primary-color;
        }

        .text {
            font-weight: 700;
            text-align: left;
            color: #181818;
            line-height: 12px;
            font-size: 18px;
        }
    }
}

.container {
    width: 100%;
    height: auto;
    background: #ffffff;
    border-radius: 5px;
    margin: 16px 0;
    padding: 15.5px 12px;
    box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;



    .attribute {
        width: 80px;
        height: auto;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        text-align: left;
        color: #181818;
        text-align: justify;
        text-align-last: justify;
        display: inline-block;
        line-height: 27px;
    }

    .joiner {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        line-height: 27px;
    }

    .content {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        text-align: left;
        color: #646464;
        line-height: 27px;
        overflow-x: hidden;
        max-lines: 1;
    }


    .avatar {
        width: 74px;
        height: 74px;
        float: right;
    }


}
</style>
